<template>
  <el-dialog
    v-model="visible"
    title="规格详情"
    :width="'50%'"
    :before-close="handleClose"
  >
    <section class="content">
      <p>CPU型号：{{ data?.cpu_name }}</p>
      <p>GPU型号：{{ data?.gpu_show_type }}</p>

      <div class="table">
        <el-table :data="data.spec_list" border>
          <el-table-column align="center" prop="cpu" label="cpu">
          </el-table-column>
          <el-table-column align="center" prop="ram" label="内存">
          </el-table-column>
          <el-table-column align="center" prop="gpu" label="GPU数量">
          </el-table-column>
          <el-table-column align="center" prop="az_list" label="可用区">
            <template #default="scope">
              <p v-for="it of scope.row.az_list" :key="it?.id">
                {{ it?.name }}
              </p>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="sum" label="主账号余量">
            <template #default="scope">
              <p v-for="it of scope.row.az_list" :key="it?.id">
                {{ it?.sum }}
              </p>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template #default="scope">
              <div v-for="(it, index) in scope.row.az_list" :key="it?.id">
                <el-button
                  type="text"
                  @click="FnCheckBalance(scope.row, index)"
                >
                  查询余量
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </section>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false" type="primary">返回</el-button>
      </div>
    </template>

    <!-- 查看余量 -->
    <el-dialog
      v-model="visible2"
      :width="600"
      title="查询余量"
      append-to-body
      :before-close="handleClose2"
    >
      <el-form :model="formData" ref="form" inline label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="客户ID："
              prop="customer_id"
              :rules="[
                { required: true, message: '请输入客户ID', trigger: 'blur' },
              ]"
            >
              <el-input
                v-model="formData.customer_id"
                style="width: 200px"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="24">
            <el-form-item
              label="子用户ID："
              prop="user_id"
              :rules="[
                { required: true, message: '请输入子用户ID', trigger: 'blur' },
              ]"
            >
              <el-input
                v-model="formData.user_id"
                style="width: 200px"
              ></el-input></el-form-item
          ></el-col>
          <el-col :span="24">
            <el-form-item label=" ">
              <el-button type="primary" @click="submitForm(form)"
                >查询余量与权限</el-button
              ></el-form-item
            ></el-col
          >
          <el-col>
            <el-form-item label=" ">
              <div class="result">
                <span>{{ currentRow?.az_list[currentIndex]?.name }}</span
                ><span>{{ sum }}台</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </el-dialog>
</template>

<script> 
import { computed, ref, watch } from "vue";
import GoodsService from '@/service/eks/goods'
export default {
  props: {
    row: {
      type: Object,
      default: () => ({}),
      required: true
    },
    modelValue: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const visible = computed({
      get: () => props.modelValue,
      set: (val) => {
        emit('update:modelValue', val)
      }
    })

    watch(() => visible.value, (newVal, oldVal) => {
      if (newVal) {
        getGoodsSpec()
      }
    })

    const handleClose = (done) => {
      visible.value = false
      data.value = {}
      done()
    }

    const handleClose2 = (done) => {
      visible2.value = false
      done()
    }

    const data = ref({})
    const getGoodsSpec = () => {
      GoodsService.getGoodsSpec({
        family_id: props.row?.family_id,
        category_id: props.row?.category_id,
        goods_id: props.row?.goods_id
      }).then(res => {
        if (res.code === 'Success') {
          data.value = res.data
        }
      })
    }


    const visible2 = ref(false);
    watch(() => visible2.value, (newVal, oldVal) => {
      if (!newVal) {
        form.value?.resetFields()
      }
    })

    const currentRow = ref({});
    const currentIndex = ref(0);
    const formData = ref({
      customer_id: 'E888908',
      user_id: '577066'
    });
    let sum = ref(0)
    const FnCheckBalance = (row, index) => {
      visible2.value = true;
      currentRow.value = row;
      currentIndex.value = index
    }
    const getInventory = () => {
      GoodsService.getInventory({
        customer_id: formData.value.customer_id,
        user_id: formData.value.user_id,
        family_id: data.value?.family_id,
        available_zone_id: currentRow.value?.az_list[currentIndex.value]?.id,
        cpu: currentRow.value?.cpu,
        ram: currentRow.value?.ram,
        gpu: currentRow.value?.gpu
      }).then(res => {
        if (res.code === 'Success') {
          sum.value = res.data.sum
        }
      })
    }

    let form = ref(null);
    const submitForm = async (formEl) => {
      if (!formEl) return
      await formEl.validate((valid, fields) => {
        if (valid) {
          getInventory()
        } else {
          console.log('error submit!', fields)
        }
      })
    }


    return {
      visible,
      visible2,
      currentIndex,
      currentRow,
      data,
      handleClose,
      handleClose2,
      FnCheckBalance,
      formData,
      getInventory,
      submitForm,
      form,
      sum
    }
  }
}
</script> 

<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: center;
}
.result {
  display: flex;
  justify-content: space-around;
  > span {
    margin-right: 60px;
  }
}
</style>
